<template>
	<gracePage :customHeader="false">
		<!-- 页面主体 -->
		<view slot="gBody">
			<view style="width:750rpx;height:120rpx;background:rgba(255,255,255,1);">
				<view class="grace-columns">
					<view class="grace-space-between" style="margin-left: 60rpx;margin-top: 15rpx;margin-right: 60rpx;">
						<view style="font-size:28rpx;font-weight:400;color:rgba(51,51,51,1)">银联扣款</view>
						<view style="font-size:28rpx;font-weight:400;color:rgba(51,51,51,1);">{{ money }}元</view>
					</view>
					<view class="grace-flex-center" style="margin-top: 5rpx;">
						<view style="width:650rpx;height:2rpx;background:rgba(204,204,204,1);"></view>
					</view>
					<view style="margin-top: 15rpx;margin-left: 580rpx; font-size:22rpx;font-weight:400;" :style="{color:show_status==='交易成功'?'rgba(0, 255, 0, 255)':show_status==='交易失败'?'rgba(204,41,14,1)':show_status==='交易中'?'rgba(255, 170, 0, 255)':'rgba(112, 112, 112, 255)' }">{{ show_status }}</view>
				</view>
			</view>

			<view style="margin-top: 10rpx; width:750rpx;height:60rpx;background:rgba(255,255,255,1);">
				<view class="grace-space-between" style="margin: 0 60rpx;line-height: 60rpx;">
					<view style="font-size:26rpx;font-weight:400;color:rgba(51,51,51,1);">类型：</view>
					<view style="font-size:26rpx;font-weight:400;color:rgba(51,51,51,1);">{{ m_type }}</view>
				</view>
			</view>

			<view style="margin-top: 10rpx; width:750rpx;height:60rpx;background:rgba(255,255,255,1);">
				<view class="grace-space-between" style="margin: 0 60rpx;line-height: 60rpx;">
					<view style="font-size:26rpx;font-weight:400;color:rgba(51,51,51,1);">交易单号：</view>
					<view style="font-size:26rpx;font-weight:400;color:rgba(51,51,51,1);">{{ order_num }}</view>
				</view>
			</view>

			<view style="margin-top: 10rpx; width:750rpx;height:60rpx;background:rgba(255,255,255,1);">
				<view class="grace-space-between" style="margin: 0 60rpx;line-height: 60rpx;">
					<view style="font-size:26rpx;font-weight:400;color:rgba(51,51,51,1);">创建时间：</view>
					<view style="font-size:26rpx;font-weight:400;color:rgba(51,51,51,1);">{{ create_time }}</view>
				</view>
			</view>

			<view style="margin-top: 10rpx; width:750rpx;height:60rpx;background:rgba(255,255,255,1);">
				<view class="grace-space-between" style="margin: 0 60rpx;line-height: 60rpx;">
					<view style="font-size:26rpx;font-weight:400;color:rgba(51,51,51,1);">手续费：</view>
					<view style="font-size:26rpx;font-weight:400;color:rgba(51,51,51,1);">{{ poundage }}元</view>
				</view>
			</view>

			<view style="margin-top: 10rpx; width:750rpx;height:60rpx;background:rgba(255,255,255,1);">
				<view class="grace-space-between" style="margin: 0 60rpx;line-height: 60rpx;">
					<view style="font-size:26rpx;font-weight:400;color:rgba(51,51,51,1);">支付卡：</view>
					<view style="font-size:26rpx;font-weight:400;color:rgba(51,51,51,1);">{{ show_pay_str }}</view>
				</view>
			</view>

			<view style="margin-top: 10rpx; width:750rpx;height:60rpx;background:rgba(255,255,255,1);">
				<view class="grace-space-between" style="margin: 0 60rpx;line-height: 60rpx;">
					<view style="font-size:26rpx;font-weight:400;color:rgba(51,51,51,1);">到账卡：</view>
					<view style="font-size:26rpx;font-weight:400;color:rgba(51,51,51,1);">{{ show_arrive_str }}</view>
				</view>
			</view>

			<view v-show="m_yinc" style="margin-top: 10rpx; width:750rpx;height:60rpx;background:rgba(255,255,255,1);">
				<view class="grace-space-between" style="margin: 0 60rpx;line-height: 60rpx;">
					<view style="font-size:26rpx;font-weight:400;color:rgba(51,51,51,1);">失败原因：</view>
					<view style="font-size:26rpx;font-weight:400;color:rgba(204,41,14,1);">{{ errors===null?'':errors }}</view>
				</view>
			</view>
		</view>
	</gracePage>
</template>

<script>
	import gracePage from "../../graceUI/components/gracePage.vue";
	export default {
		data() {
			return {
				button_color:'',//按钮颜色
				id: '',
				name: "银行扣款", //文字描述
				money: 5, //刷卡金额
				show_status: "交易中", //状态
				order_num: "285e01ccce0abee", //订单号
				create_time: "2019-12-24 16:31", //创建时间
				poundage: 1, //手续费
				show_pay_str: "中国银行(1511)", //信用卡字符串
				show_arrive_str: "中国银行(1511)", //储蓄卡字符串
				errors: '', //错误描述
				m_type: '', // 消费还款类型
				m_yinc: true
			}
		},
		onShow() {
			this.button_color = uni.getStorageSync('button_color');
		},
		onLoad: function(opt) {
			var vm = this;
			this.id = opt.id;
			this.myPost(
				'api/cloudbrush/get_cloud_brush_info', {
					id: this.id
				},
				function(res) {
					if(res.code == 200){
						console.log(res);
						vm.name = res.data.name;
						vm.money = res.data.bill_money;
						vm.show_status = res.data.rp_state;
						vm.m_type = res.data.type;
						vm.order_num = res.data.order_num;
						vm.create_time = res.data.create_time;
						vm.poundage = res.data.procedures;
						vm.show_pay_str = res.data.credit_num;
						vm.show_arrive_str = res.data.settlement_num;
						if(!vm.errors){
							vm.m_yinc = false
						}else{
							vm.errors = res.data.stop_msg;
						}
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
					

				}
			)
		},
		components: {
			gracePage
		}
	}
</script>

<style>
</style>
